<template>
	<view class="todayRecommand">
		<text class="title">今日推荐</text>
		<view class="swiperBar">
			<view v-for="(item, index) in swiperList" :animation="item" class="box"></view>
		</view>
		<swiper @change="change" :autoplay="true" circular :interval="3000" :duration="1000">
			<swiper-item v-for="(item, index) in todays" :key="index">
				<view  class="swiper-item">
					<view class="background">
						<view class="text">
							<view>{{ item.name }}</view>
							<view class="content">{{ item.content }}</view>
							<view>￥{{ item.value.toFixed(2) }} CNY</view>
						</view>
					</view>
					<image :src="item.url" mode="widthFix"></image>
				</view>
			</swiper-item>
		</swiper>
	</view>
	<view class="hotRecommend">
		<text class="title">热门推荐</text>
		<view class="content">
			<view @click="toShopping(item)" v-for="(item, index) in hots" :key="index" class="box">
				<image :src="item.url" mode="widthFix"></image>
				<view>{{ item.name }}</view>
				<view>￥{{ item.value.toFixed(2) }} CNY</view>
			</view>
		</view>
	</view>
	<view class="todayVideo">
		<text class="title">今日热门</text>
		<view class="content">
			<view v-for="(item, index) in videos" :key="index" class="video">
				<image class="background" :src="item.background" mode="widthFix"></image>
				<image class="play" src="../../static/play.png" mode="widthFix"></image>
				<image class="avatar" :src="item.avatar" mode="widthFix"></image>
				<view class="text">
					<view class="videoName">{{ item.name }}</view>
					<view class="value">
						<image src="../../static/yuan.png" mode="widthFix"></image>
						{{ item.value }} CNY
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	const props = defineProps(['todays', 'hots'])
	const swiperList = ref(Array(props.todays.length).fill({}))
	let animation = uni.createAnimation({
		duration: 1000,
		timingFunction: 'ease',
	})
	swiperList.value[0] = animation.width('140rpx').step().export()
	const change = (e) => {
		for (let i = 0; i < swiperList.value.length; ++i) {
			swiperList.value[i] = animation.width('30rpx').step().export()
		}
		swiperList.value[e.detail.current] = animation.width('140rpx').step().export()
	}
	
	const videos = ref([
		{
			background: '../../static/image_8.png',
			avatar: '../../static/image_11.png',
			name: '欢迎选购知行&奶茶',
			value: '12.00'
		},
		{
			background: '../../static/image_10.png',
			avatar: '../../static/image_12.png',
			name: '欢迎选购冰霜&奶茶',
			value: '16.00'
		}
	])
	
	const toShopping = (item) => {
		uni.setStorageSync("shopping", JSON.stringify(item))
		console.log(JSON.stringify(item));
		uni.navigateTo({
			url: '/pages/shopping/shopping'
		})
	}
	
</script>

<style lang="scss" scoped>
	.todayRecommand {
		margin: 25rpx;
		padding-top: 100rpx;
		.title {
			font-size: 55rpx;
			font-weight: 600;
		}
		.swiperBar {
			margin-top: 20rpx;
			height: 10rpx;
			display: flex;
			position: absolute;
			top: 770rpx;
			left: 70rpx;
			z-index: 3;
			.box {
				height: 100%;
				width: 30rpx;
				background-color: white;
				margin: 0 4rpx;
				border-radius: 10rpx;
			}
		}
		
		swiper {
			height: 640rpx;
			width: 700rpx;
			.swiper-item {
				position: relative;
				margin: 20rpx;
				image {
					// position: relative;
					top: -250rpx;
					width: 100%;
					z-index: 0;
					border-radius: 40rpx;
					/* 修正后的阴影 */
				}
				.background {
					position: relative;
					top: 320rpx;
					width: 100%;
					height: 300rpx;
					// background-color: rgba(0, 0, 0, 0.3);
					background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
					z-index: 1;
					border-radius: 0 0 40rpx 40rpx;
					.text {
						z-index: 2;
						position: relative;
						color: white;
						top: 40rpx;
						left: 40rpx;
						width: 350rpx;
						.tilte {
							font-size: 16rpx;
							// font-weight: 600;
						}
						.content {
							font-size: 36rpx;
						}
					}
				}
				
			}
		}
	}
	.hotRecommend {
		margin: 25rpx;
		padding-top: 30rpx;
		// padding-bottom: 140rpx;
		.title {
			font-size: 45rpx;
			font-weight: 500;
		}
		.content {
			margin-top: 20rpx;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			// grid-auto-rows: 10px;
			gap: 20rpx;
			.box {
				// height: 200rpx;
				image {
					width: 100%;
				}
			}
		}
	}
	
	.todayVideo {
		margin: 35rpx 55rpx;
		padding-top: 50rpx;
		// padding-bottom: 150rpx;
		.title {
			font-size: 55rpx;
			// font-weight: 550;
		}
		.content {
			margin-top: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.video {
				width: 658rpx;
				margin-bottom: -180rpx;
				.background {
					width: 100%;
				}
				.play {
					position: relative;
					width: 110rpx;
					left: 270rpx;
					top: -370rpx;
				}
				.avatar {
					width: 73rpx;
					position: relative;
					left: 400rpx;
					top: -210rpx;
				}
				.text {
					position: relative;
					left: 60rpx;
					top: -290rpx;
					color: white;
					.videoName {
						font-size: 36rpx;
					}
					.value {
						font-size: 28rpx;
						image {
							width: 20rpx;
						}
					}
				}
			}
		}
	}
</style>